<template>
  <div class="deployment">	
		<x-header :left-options="{backText: ''}">工作部署</x-header>		
			
		<!--数据加载动画 start-->
		<div class="loadingBox" v-show="status == 0">
			<div class="loading">
				<div>loading..</div>
				<div></div>
				<div></div>
			</div>
		</div>
		<!--数据加载动画 end-->
			
		<!--加载完成后 start-->
  	<div class="loadingOver" v-show="status == 1">
  		<div class="tabBox">
				<tab>
		      <tab-item selected @on-item-click="onItemClick">上级安排</tab-item>
		      <tab-item @on-item-click="onItemClick">镇党委安排</tab-item>
		    </tab>
			</div>
			<div class="listBox">
				<ul class="anounce-listContent" v-show="index == 0">
					<li class="detailList" v-for="(detailList,index) in superiorArrangement">
						<router-link to="" class="routerLink">
							<div class="detailList-title" v-text="detailList.RWTitle">新形势下基层信访稳定工作的“庞村经验”庞村经验庞村经验</div>
							<div class="detailList-info">
								<div class="fl">发布：<span v-text="detailList.CRDate.substr(0,10)">2017-06-22</span></div>    
								<div class="clear"></div>
							</div>
						</router-link>
						<span class="touchId" :dataId="detailList.ID" @click="superiorArrangementDetailShow"></span>
					</li>
					<li class="loadMore" v-text="superiorArrangementLoadingText" v-if="superiorArrangementLength > 8" @click="superiorArrangementMore"></li>
				</ul>
				<ul class="anounce-listContent" v-show="index == 1">
					<li class="detailList" v-for="(detailList,index) in partyCommitteeArrangement" @click="partyCommitteeArrangementDetailShow">
						<router-link to="" class="routerLink">
							<div class="detailList-title" v-text="detailList.RWTitle">新形势下基层信访稳定工作的“庞村经验”庞村经验庞村经验</div>
							<div class="detailList-info">
								<div class="fl">发布：<span v-text="detailList.CRDate.substr(0,10)">2017-06-22</span></div>    
								<!--<div class="fr">点击量：<span v-text="exchangeArray(detailList.Item[0].ReadUser)">5</span></div>-->
								<div class="clear"></div>
							</div>
						</router-link>
						<span class="touchId" :dataId="detailList.ID"></span>
					</li>
					<li class="loadMore" v-text="partyCommitteeArrangementLoadingText" v-if="partyCommitteeArrangementLength > 8" @click="partyCommitteeArrangementMore"></li>
				</ul>
			</div>
		</div>
		<!--加载完成后 end-->

		
	</div>
</template>

<script>
import Api from 'assets/js/api';
import init from 'assets/js/init';
import commonFooter from './common/footer';
import { XHeader, Actionsheet, TransferDom } from 'vux'
import { Tab, TabItem, Sticky, Divider, XButton, Swiper, SwiperItem } from 'vux'

var api = new Api();
var superiorArrangementID;//上级安排信息ID
var partyCommitteeArrangementID;//镇党委安排信息ID
var result = localStorage.getItem('result');

export default {
  name: 'deployment',
  data () {
    return {
    	status:'0',//默认加载状态为0
    	index:'',//tab栏的index
     	superiorArrangement:[],
     	superiorArrangementLoadingText:'点击加载更多',
     	superiorArrangementLength:'',
     	superiorArrangementPage:1,////初始默认superiorArrangementPage为加载第一页，往后每点击一次加载更多则增加一页
     	partyCommitteeArrangement:[],
     	partyCommitteeArrangementLoadingText:'点击加载更多',
     	partyCommitteeArrangementLength:'',
     	partyCommitteeArrangementPage:1,////初始默认partyCommitteeArrangementPage为加载第一页，往后每点击一次加载更多则增加一页
    }
  },
  activated(){
  	var self = this;
		console.log(result);
		//获取ID类别
		api.post(api.url.deployment, {
			Action: 'XTGL_GETZIDIANSLIST',
			P1: '7',
			szhlcode: result
		}).then((result) => {
			console.log(result);
			superiorArrangementID = result.data.Result[0].ID;
			partyCommitteeArrangementID = result.data.Result[1].ID;
		}).catch((error) => {
			console.log(error);
		});
		
		
		//默认获取上级安排信息
		api.post(api.url.deployment, {
			Action: 'RWGL_GETRWGLLISTBYAPP',
			p: '1',
			pagecount: '8',
			lb: superiorArrangementID,
			szhlcode: result
		}).then((response) => {
			console.log(response);
			this.superiorArrangement = response.data.Result;
			this.superiorArrangementLength = response.data.Result1;
			if(response.status == 200){
				this.status = 1;
			}
		}).catch((error) => {
			console.log(error);
		});
  },
  methods:{
  	onItemClick (index) {
  		//上级安排
  		console.log(index);
  		this.index = index;
  		var self = this;
      if(this.index == 0){
      	/*if(self.superiorArrangement == 0){*/
      		api.post(api.url.deployment, {
						Action: 'RWGL_GETRWGLLISTBYAPP',
						p: '1',
						pagecount: '8',
						lb: superiorArrangementID,
						szhlcode: result
					}).then((result) => {
						console.log(result);
						this.superiorArrangement = result.data.Result;
					}).catch((error) => {
						console.log(error);
					});
      	/*}*/
      }
      //镇党委安排
      if(this.index == 1){
      	/*if(self.partyCommitteeArrangement == 0){*/
      		this.status = 0;
      		api.post(api.url.deployment, {
						Action: 'RWGL_GETRWGLLISTBYAPP',
						p: '1',
						pagecount: '8',
						lb: partyCommitteeArrangementID,
						szhlcode: result
					}).then((response) => {
						console.log(response);
						this.partyCommitteeArrangement = response.data.Result;
						this.partyCommitteeArrangementLength = response.data.Result1;
						if(response.status == 200){
							this.status = 1;
						}
					}).catch((error) => {
						console.log(error);
					});
      	/*}*/
      }
    },
    superiorArrangementMore(){
    	this.superiorArrangementPage += 1;
			var self = this;
    	this.superiorArrangementLoadingText = '正在加载中···';
    	api.get(api.url.index,{ 
				params:{
					Action: 'RWGL_GETRWGLLISTBYAPP',
					p: self.superiorArrangementPage,
					pagecount: (self.superiorArrangementLength - self.superiorArrangementPage*8) > 0 ? 8 : 8 - Math.abs(self.superiorArrangementLength - self.superiorArrangementPage*8),
					lb: superiorArrangementID,
					szhlcode: result
				}
			}).then(result=>{ 
				console.log(result)
				self.superiorArrangement = self.superiorArrangement.concat(result.data.Result);
				this.superiorArrangementLoadingText = '点击加载更多';
			}).catch(err=>{ 
				console.log(error);
				this.superiorArrangementLoadingText = '点击加载更多';
			})
    },
    partyCommitteeArrangementMore(){
    	this.partyCommitteeArrangementPage += 1;
			var self = this;
    	this.partyCommitteeArrangementLoadingText = '正在加载中···';
    	api.get(api.url.index,{ 
				params:{
					Action: 'RWGL_GETRWGLLISTBYAPP',
					p: self.partyCommitteeArrangementPage,
					pagecount: (self.partyCommitteeArrangementLength - self.partyCommitteeArrangementPage*8) > 0 ? 8 : 8 - Math.abs(self.partyCommitteeArrangementLength - self.partyCommitteeArrangementPage*8),
					lb: partyCommitteeArrangementID,
					szhlcode: result
				}
			}).then(result=>{ 
				console.log(result)
				self.partyCommitteeArrangement = self.partyCommitteeArrangement.concat(result.data.Result);
				this.partyCommitteeArrangementLoadingText = '点击加载更多';
			}).catch(err=>{ 
				console.log(error);
				this.partyCommitteeArrangementLoadingText = '点击加载更多';
			})
    },
    superiorArrangementDetailShow(){
			localStorage.removeItem("superiorArrangementDetailTitle");
			localStorage.removeItem("superiorArrangementDetailInfo");
			var self = this;
			var dataId = event.target.getAttribute('dataId');
			var superiorArrangementDetailTitle;
			var superiorArrangementDetailInfo;
			var reg = new RegExp("/ViewV5/Base/DownFile.aspx?fileId","g");
			for(var i = 0;i < self.superiorArrangement.length; i++){
				if(parseInt(dataId) == self.superiorArrangement[i].ID){
					self.detailTitle = self.superiorArrangement[i].RWTitle ;
					var firstExchange = api.firstExchange(self.superiorArrangement[i].RWContent);
					self.detailInfo = api.secondExchange(firstExchange);
					superiorArrangementDetailTitle = self.detailTitle;
					superiorArrangementDetailInfo = self.detailInfo;
				}
			}
			console.log(superiorArrangementDetailTitle);
			localStorage.setItem("superiorArrangementDetailTitle",superiorArrangementDetailTitle);
			localStorage.setItem("superiorArrangementDetailInfo",superiorArrangementDetailInfo);
			self.$router.push('/superiorArrangementDetail');
		},
		partyCommitteeArrangementDetailShow(){
			localStorage.removeItem("townPartyCommitteeTitle");
			localStorage.removeItem("townPartyCommitteeInfo");
			var self = this;
			var dataId = event.target.getAttribute('dataId');
			var townPartyCommitteeTitle;
			var townPartyCommitteeInfo;
			var reg = new RegExp("/ViewV5/Base/DownFile.aspx?fileId","g");
			for(var i = 0;i < self.partyCommitteeArrangement.length; i++){
				if(parseInt(dataId) == self.partyCommitteeArrangement[i].ID){
					self.detailTitle = self.partyCommitteeArrangement[i].RWTitle ;
					var firstExchange = api.firstExchange(self.partyCommitteeArrangement[i].RWContent);
					self.detailInfo = api.secondExchange(firstExchange);
					townPartyCommitteeTitle = self.detailTitle;
					townPartyCommitteeInfo = self.detailInfo;
				}
			}
			console.log(townPartyCommitteeTitle);
			localStorage.setItem("townPartyCommitteeTitle",townPartyCommitteeTitle);
			localStorage.setItem("townPartyCommitteeInfo",townPartyCommitteeInfo);
			self.$router.push('/townPartyCommitteeDetail');
		},
  },
  components:{
  	commonFooter,
  	XHeader,
    Actionsheet,
    Tab,
    TabItem,
    Sticky,
    Divider,
    XButton,
    Swiper,
    SwiperItem
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	@import url("../assets/css/common.css");
	.deployment{
		width: 100%;
		height: 100%;
	}
	.header{
		width: 100%;
		height: 2rem;
		line-height: 2rem;
		background-color: #f00;
		color: #fff;
		font-size: 0.8rem;
		text-align: center;
		font-weight: 700;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2000;
	}
	
	.vux-header{
		background-color: #f00 !important;
		position: fixed !important;
		top: 0;
		left: 0;
		z-index: 2000;
		width: 100%;
	}
	.vux-header .vux-header-left .left-arrow:before{
		border: 2px solid #fff !important;
    border-width: 2px 0 0 2px !important;
	}
	
	.vux-tab{
		padding-top: 40px;
	}
	
	.vux-tab .vux-tab-item.vux-tab-selected{
		color: #f00 !important;
    border-bottom: 3px solid #f00 !important;
	}
	.vux-tab-ink-bar{
		background-color: #f00 !important;	
	}
	
	.listBox{
		width: 100%;
		box-sizing: border-box;
		padding-left: 0.5rem;
		margin-top: 0.5rem;
		padding-bottom: 3rem;
		background-color: #fff;
		border-top: 1px solid transparent;
	}
	.anounce-listContent{
		width: 100%;
		box-sizing: border-box;
	}
	.detailList{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding-right: 0.5rem;
		border-bottom: 1px solid #e9e9e9;
		position: relative;
	}
	.detailList .touchId{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.detailList-title{
		width: 95%;
		font-size: 0.7rem;
		color: #333;
		white-space:nowrap; 
		overflow:hidden; 
		text-overflow:ellipsis;
		margin-top: 0.3rem;
	}
	.detailList-info{
		width: 95%;
		font-size: 0.5rem;
		color: #999;
		white-space:nowrap; 
		overflow:hidden; 
		text-overflow:ellipsis;
		margin-top: 0.1rem;
		margin-bottom: 0.3rem;
	}
	.routerLink{
		display: block;
	}
	.loadMore{
		font-size: 0.7rem;
		width: 100%;
		height: 2rem;
		line-height: 2rem;
		text-align: center;
		box-sizing: border-box;
		padding-right: 0.5rem;
	}
	
	/*加载动画*/
	.loadingBox{
		width: 100%;
		height: 100%;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		-webkit-flex-direction: column;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
	}
	.loading {
	    border-radius: 50%;
	    font-size: 20px;
	    height: 100px;
	    line-height: 90px;
	    position: relative;
	    text-align: center;
	    width: 100px;
	}
	.loading > div:nth-child(2) {
	    border-color: #FFF;
	    left: 0px;
	    width: 90px;
	}
	.loading > div:nth-child(3) {
	    border-color: #009933;
	    left: -5px;
	    width: 100px;
	    -webkit-animation-delay: 0.5s;
	    -moz-animation-delay: 0.5s;
	    -ms-animation-delay: 0.5s;
	    -o-animation-delay: 0.5s;
	    animation-delay: 0.5s;
	}
	.loading > div:nth-child(2), .loading > div:nth-child(3) {
	    background-color: rgba(255, 255, 255, 0.2);
	    border: 5px solid #FFF;
	    border-radius: 50%;
	    box-shadow: 0 0 5px 0 #f00;
	    height: 100px;
	    position: absolute;
	    top: 0px;
	    border-top-width: 0;
	    border-bottom-width: 0;
	    -webkit-animation: anim3 2s linear infinite;
	    -moz-animation: anim3 2s linear infinite;
	    -ms-animation: anim3 2s linear infinite;
	    -o-animation: anim3 2s linear infinite;
	    animation: anim3 2s linear infinite;
	}
	@keyframes anim3{
		0% {
		    transform: rotateY(0deg);
		}
		50% {
		    transform: rotateY(180deg);
		}
		100% {
		    transform: rotateY(360deg);
		}
	}
	
	
	/*查看信息详情*/
	.viewDetail{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2001;
		background-color: rgba(0,0,0,0.5);
		box-sizing: border-box;
		padding: 1rem 1rem 4rem 1rem;
	}
	.viewDetailContent{
		width: 100%;
		height: 100%;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0.5rem;
		text-align: center;
	}
	.viewDetailContent-title{
		width: 100%;
		font-size: 0.8rem;
		color: #333;
		text-align: center;
		margin-bottom: 0.5rem;
	}
	.viewDetailContent-info{
		width: 100%;
		height: 88%;
		font-size: 0.5rem !important;
		color: #666;
		text-align: left;
		/*text-indent: 1rem;*/
		line-height: 0.8rem;
		display:block;
		word-break: break-all;
		word-wrap: break-word;
		overflow-y: scroll;
	}
	.viewDetailContent-info p{
		line-height: 1rem !important;
	}
	.viewDetailContent-info p span{
		font-size: 0.5rem !important;
	}
	
	.viewDetailContent-info img{
		max-width: 100% !important;
    	width: initial !important;
    	height: initial !important;
	}
	.viewDetailContent-info table{
		width: initial !important;
		max-width: 100% !important;
	}
	.viewDetailClose{
		position: fixed;
		bottom: 2rem;
		left: 50%;
		margin-left: -0.75rem;
		font-size: 1.5rem;
		color: #fff;
		z-index: 2002;
	}
	
	
</style>
